/* eslint-disable react-native/no-inline-styles */
import React, {useState, useRef} from 'react';
import {FlatList, RefreshControl, StyleSheet} from 'react-native';
import {
  View,
  Text,
  ListItem,
  Colors,
  Image,
  BorderRadiuses,
} from 'react-native-ui-lib';
import {get} from '@/utils/request';
import Mheader from '@/components/Mheader';
import {useRequest} from 'ahooks';
import {difftime} from '@/utils/time';
import dayjs from 'dayjs';

const Notice = ({navigation}) => {
  const styles = StyleSheet.create({
    image: {
      width: 60,
      height: 60,
      borderRadius: BorderRadiuses.br20,
      backgroundColor: Colors.cardbackgroundColor,
    },
    border: {
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderColor: Colors.grey70,
      flex: 1,
    },
  });
  const flatListRef = useRef();

  const [refreshing, setRefreshing] = useState(false);
  const [isRead, setIsRead] = useState(0);
  const Prefix = global.file;
  const {data, loading, refreshAsync} = useRequest(
    async () => {
      let res = await get('/notice', {
        isRead,
      });
      return res?.data?.dataList;
    },
    {
      refreshDeps: [isRead],
    },
  );

  const onRefresh = async () => {
    // 下拉刷新
    setRefreshing(true);
    await refreshAsync();
    setRefreshing(false);
  };

  const renderItem = ({item}) => {
    return (
      <ListItem
        activeBackgroundColor={Colors.grey60}
        activeOpacity={0.3}
        backgroundColor={Colors.colorCardBg}
        height={83.5}
        marginV-6
        marginH-12
        br20
        onPress={() => {
          // TODO:
        }}>
        <ListItem.Part left>
          <View marginH-12>
            {item?.userHeadUrl ? (
              <Image
                source={{
                  uri: item?.userHeadUrl ? Prefix + item.userHeadUrl : null,
                }}
                style={styles.image}
              />
            ) : (
              <View style={styles.image} center br20>
                <Text subheading style={{fontWeight: 'bold'}}>
                  {item.userName?.charAt?.(0)}
                </Text>
              </View>
            )}
          </View>
        </ListItem.Part>
        <ListItem.Part
          column
          left
          center
          containerStyle={[styles.border, {padding: 10, paddingLeft: 0}]}>
          <View row>
            <Text
              subheading
              style={{flex: 1, marginRight: 10, fontWeight: 'bold'}}
              numberOfLines={1}>
              {item?.title}
            </Text>
            <Text body>{difftime(dayjs(), dayjs(item?.createTime))}</Text>
          </View>

          <Text body style={{marginTop: 8}} numberOfLines={2}>
            {item?.message}
          </Text>
        </ListItem.Part>
      </ListItem>
    );
  };

  return (
    <View flex-1>
      <Mheader
        title={isRead === 0 ? '未读消息' : '已读消息'}
        extraContent={
          <Text
            subheading
            onPress={() => {
              flatListRef.current.scrollToIndex({index: 0, animated: true});
              setIsRead(isRead === 0 ? 1 : 0);
            }}>
            {isRead !== 0 ? '未读' : '已读'}
          </Text>
        }
      />
      <View flex-1>
        <FlatList
          ref={flatListRef}
          style={{paddingBottom: 66}}
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id.toString()}
          refreshControl={
            <RefreshControl
              refreshing={refreshing || loading}
              onRefresh={onRefresh}
            />
          }
        />
      </View>
    </View>
  );
};

export default Notice;
